<template>
  <div class="">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="(a, i) in list" :key="i" :title="a.title" />
    </van-list>
  </div>
</template>

<script>
// 导入接口 方法
import { getSearch } from '@/api/search.js'

export default {
  name: 'SearchResult', // 搜索结果组件
  props: {
    // 搜索关键字
    searchKey: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1, // 当前页码
      pageSize: 20 // 页容量
    }
  },
  created() {},
  methods: {
    // 1. 加载列表数据方法----------------------------------
    // 触发时机：a.list组件首次加载时 执行 b.list组件 触底时
    async onLoad() {
      // a.调用接口 请求 查询列表
      const { data } = await getSearch(this.searchKey, this.page, this.pageSize)
      // b.设置给 视图渲染使用
      this.list.push(...data.data.results)
      // c.关闭 list组件 加载状态
      this.loading = false
      // d.如果 本次 响应的 结果数组 的长度 < 页容量，就彻底关闭list组件触底加载
      if (data.data.results.length < this.pageSize) {
        this.finished = true
      } else {
        // e.否则，页码+1，用来准备请求下一页数据
        this.page++
      }
    }
  },
  computed: {},
  watch: {},
  components: {}
}
</script>

<style lang="less" scoped>
</style>
